<template>
  <div class="grid-auto-rows">
    <h3>grid-auto-rows用法</h3>
    <div class="grid-auto-rows-content">
      <div v-for="item in 9" :key="item" :class="['item', `item${item}`]">
        {{ item }}
      </div>
    </div>
    <pre>
      <span class="remarks">grid-auto-rows用于给没有设置的行设置默认行高</span>
    </pre>
  </div>
</template>
<script>
import { getRandomColor } from '@/utils/index'
export default {
  name: 'GridAutoRows',
  data() {
    return {}
  },
  mounted() {
    this.getItemColor()
  },
  methods: {
    getItemColor() {
      this.$el
        .querySelectorAll('.grid-auto-rows-content .item')
        .forEach((item) => {
          item.style.backgroundColor = getRandomColor()
        })
    },
  },
}
</script>
<style lang="less" scoped>
.grid-auto-rows {
  &-content{
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-rows: 50px;
    gap: 10px;
    margin: 10px 0;
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>